<template>
	<div class="mobileCar">
		<div class="top">
			<router-link to="/mobile/melist" class="el-icon-arrow-left
			"></router-link>
			<h2>购物车<i class="el-icon-location-outline"></i></h2>
			<div class="a1">
				<p>编辑 </p>
				<p class="el-icon-more"></p>
			</div>
		</div>


		<!-- 商品详情 -->
		<div class="ProductDetail" v-for="(item ,i) in carList">
			<!-- 店名 -->
			<div class="ProductDetails_box1">
				<input type="checkbox" />
				<p class="name">
					{{item.book.maker}}
				</p>
			</div>

			<!--  满额减价  -->
			<div class="fullReduction">
				<p class="p1">满额减</p>
				<p class="p2">购满100元，可减50元</p>
				<p class="p3">去凑单 ></p>
			</div>

			<div class="bookDetail">
				<!-- 书本详情 -->
				<div class="box">
					<!-- 购物车 复选框书本图片 -->
					<div class="reduction">
						<input type="checkbox" />
						<ul>
							<li>
								<img v-bind:src="`${$imgurl}/api/public/showimg/${item.book.pic}`" />
								<p>仅剩2件</p>
							</li>
						</ul>
					</div>


					<div class="book">
						<p class="bookName">
							{{item.book.name}}
						</p>

						<div class="book_div1">
							<p class="book_div1_money">￥:{{item.price}}</p>
							<p class="book_div1_money2">69.80</p>

							<div class="book_div2">
								<button class="btn1" @click="move(i,1)">-</button>
								<p>{{item.num}}</p>
								<button class="btn2" @click="move(i,0)">+</button>
							</div>
						</div>
					</div>
				</div>

				<div class="add">
					<p class="p1">加购价</p>
					<p class="p2">购满1件,即可享受换购优惠</p>
				</div>
				<br />
			</div>


		</div>


		<div class="rec">
			<h3>·&nbsp;当&nbsp;/&nbsp;当&nbsp;/&nbsp;为&nbsp;/&nbsp;您&nbsp;/&nbsp;推&nbsp;/&nbsp;荐&nbsp;·</h3>
			<p>RECOMMENDED FOR YOU</p>
		</div>

		<div class="aa">
			<ul>
				<li v-for="i in newslist">
					<router-link :to="`/mobile/bookdetail/${i.id}`">
						<img :src="`http://127.0.0.1/api/public/showimg/${i.pic}`" />
						<h3>{{i.name}}</h3>
						<p>自营</p>
						<div class="aa-div1">
							<p>￥:{{i.price}}</p>
							<img src="../../assets/img/mobile/购物车1.png" />
						</div>
					</router-link>
				</li>
			</ul>
		</div>
		<div class="checkAll">
			<div class="checkAll-div1"><input type="checkbox" />全选</div>
			<div class="checkAll-div2">合计:<p>￥0.00</p>
			</div>
			<div class="checkAll-div3">
				<button>去结算(0)</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MobileCar',
		data() {
			return {
				carList: [],
				newslist: []
			}
		},
		methods: {},
		mounted() {
			this.$get("/api/fore/cart/findMyCarts").then((resp) => {
				console.log(resp.data);
				this.carList = resp.data.data
			});
			this.$axios.get("http://127.0.0.1/api/public/findPageBook/2/6/0")
				.then((resp) => {
					console.log(resp.data.data);
					this.newslist = resp.data.data.books;
				})
		},
		methods: {
			move(i, type) {
				switch (type) {
					case 1:
						this.carList[i].num--;
						if (this.carList[i].num < 1) {
							this.carList[i].num = 1;
						}
						break;

					case 0:
						this.carList[i].num++;
						break;
				}
			}
		}
	}
</script>

<style scoped>
	.mobileCar {
		width: 100%;
		background: linear-gradient(to left, #debab7, #ffe9e6);
	}

	/* 购物车顶部 */
	.mobileCar .top {
		width: 100%;
		margin: 0rem 0rem;
		display: flex;
		line-height: 4rem;
		justify-content: space-between;
		background: linear-gradient(to left, #debab7, #ffe9e6);
	}

	/* 返回页面 */
	.el-icon-arrow-left {
		font-size: 1.5rem;
		margin-left: 1.5rem;
		margin-top: 2.5rem;
	}

	.mobileCar .top h2 {
		font-weight: normal;
		margin-left: 3.2rem;
		margin-top: 1rem;
	}

	.mobileCar .top .a1 {
		display: flex;
		margin-left: 2rem;
		margin: 0 1rem;
	}

	.mobileCar .top .a1 p {
		margin-top: 1.5rem;
		color: #808080;
	}

	.mobileCar .top .a1 .el-icon-more {
		margin-top: 3.2rem;
		margin-left: 0.8rem;
		color: #393A3D;
	}

	.ProductDetail {
		width: 100%;
		margin: 0.5rem 0;
		background-color: white;
		border-radius: 0.5rem;
	}

	.ProductDetails_box1 p {
		margin: 1rem 0;
	}


	/* 书店店名 */
	.ProductDetails_box1 {
		display: flex;
	}

	/* 圆形复选框 */
	input[type=checkbox] {
		margin: 1rem 0.8rem;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border: 1px solid #222;
		border-radius: 50%;
		width: 20px;
		height: 20px;
		outline: none;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
	}

	input[type=checkbox]:checked {
		background-color: #9898e2;
	}

	/* 满额减价 */
	.fullReduction {
		display: flex;
		justify-content: space-between;
		margin: 0rem 2rem;
	}

	.fullReduction .p1 {
		background-color: #fe4137;
		color: white;
		border-radius: 0.2rem;
		width: 3.5rem;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.fullReduction .p2 {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.fullReduction .p3 {
		color: #d0756e;
		font-weight: 540;
		font-size: 1.1rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bookDetail {
		border-radius: 0.8rem;
	}

	/* 商品详情 */
	.box {
		display: flex;
	}

	.reduction {
		display: flex;
		width: 42%;
	}

	/* 复选框书本图片 */
	.ProductDetail .reduction input {
		margin-top: 4.5rem;
	}

	.mobileCar ul {
		width: 75%;
		margin: 0 0 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 1rem;
	}

	.mobileCar ul li {
		width: 90%;
		overflow: hidden;
		margin-bottom: 0.5rem;
		margin-left: 0.6rem;
		position: relative;
		background-color: white;
		border-radius: 0.5rem;
	}

	.mobileCar ul li img {
		width: 100%;
		height: 8rem;
	}

	.mobileCar ul li p {
		margin-top: -0.3rem;
		width: 100%;
		height: 2rem;
		line-height: 2rem;
		font-size: 0.8rem;
		background-color: rgba(156, 158, 171, 1.0);
		color: white;
		text-align: center;
		/* 去掉加粗 */
		font-weight: normal;
		/* 强制不换行 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.book {
		width: 58%;
	}

	.book .bookName {
		margin-top: 1.3rem;
	}

	.book_div1 {
		display: flex;
		margin-top: 6.8rem;
	}

	.book_div1 .book_div1_money {
		color: red;
		font-weight: 600;
		font-size: 1.2rem;
	}

	.book_div1 .book_div1_money2 {
		margin-right: 3.5rem;
		margin-top: 0.45rem;
		font-size: 0.8rem;
		/* 字的中间加一条横线 */
		text-decoration: line-through;
	}

	.book_div2 {
		display: flex;
	}

	.book_div2 p {
		width: 3rem;
		text-align: center;
		background-color: #e8e8e8;
	}

	.book_div2 .btn1 {
		border: none;
		font-weight: 800;
		font-size: 1rem;
		margin-left: -2rem;
		background-color: white;
	}

	.book_div2 .btn2 {
		border: none;
		font-weight: 800;
		font-size: 1rem;
		background-color: white;
	}

	.add {
		display: flex;
		margin: 0 2rem;

	}

	.add .p1 {
		border: 1px solid red;
		color: red;
		border-radius: 0.2rem;
		width: 3.5rem;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.add .p2 {
		width: 14rem;
		margin-left: 0.5rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.add .p3 {
		font-weight: 540;
		font-size: 1.1rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 当当网推荐部分 */
	.rec {
		margin-top: 1.5rem;
	}

	.rec h3 {
		text-align: center;
	}

	.rec p {
		color: #b9b9b9;
		text-align: center;
		margin-top: 0.2rem;
		font-size: 0.8rem;
	}

	.aa ul {
		width: 100%;
		margin: 0.5rem auto 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.aa ul li {
		width: 44%;
		overflow: hidden;
		margin-bottom: 0.5rem;
		margin: 0.2rem 0.55rem;
		position: relative;
		text-align: center;
		border-radius: 0.3rem;
		margin-bottom: 0.5rem;
	}

	.aa ul li img {
		width: 100%;
		border-radius: 0.2rem;
		height: 11rem;
		/* margin-top: 1rem; */
	}

	.aa ul li h3 {
		width: 100%;
		height: 2rem;
		line-height: 2rem;
		font-size: 0.9rem;
		color: black;
		/* 去掉加粗 */
		font-weight: normal;
		/* 强制不换行 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* margin-left: 0.2rem; */
	}

	.aa ul li p {
		margin-left: 0.2rem;
		border: 1px solid red;
		color: red;
		border-radius: 0.2rem;
		width: 20%;
		height: 1rem;
		line-height: 1rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		background-color: white;
	}

	.aa .aa-div1 {
		display: flex;
		justify-content: space-between;
		margin: 0rem 0.2rem;
	}

	.aa .aa-div1 p {
		margin-left: -0.4rem;
		width: 35%;
		margin-bottom: 0.5rem;
		margin-top: 0.5rem;
		border: none;
		font-size: 1rem;
	}

	.aa .aa-div1 img {
		margin-top: 0.4rem;
		margin-right: 0.2rem;
		width: 1.4rem;
		height: 1.4rem;
	}

	.checkAll {
		height: 4rem;
		display: flex;
		justify-content: space-between;
		background-color: white;
		width: 100%;
		padding: 5px 0px;
		/* 粘性定位 */
		position: sticky;
		position: -webkit-sticky;
		bottom: 0;



	}

	.checkAll-div1 {
		display: flex;
		line-height: 4rem;
	}

	.checkAll-div1 input {
		margin-top: 1.6em;
	}

	.checkAll-div2 {
		display: flex;
		line-height: 4rem;
	}

	.checkAll-div2 p {
		font-weight: 800;
	}

	.checkAll-div3 {
		line-height: 4rem;
	}

	.checkAll-div3 button {
		border: none;
		background-color: #fe3114;
		color: white;
		height: 3rem;
		width: 7rem;
		margin-right: 0.5rem;
		border-radius: 1.9rem;
	}
</style>